<template>
    <a-card title="订阅用户管理" :bordered="false">
        <!-- Card Header -->

        <template slot="extra">
            <a-form layout="inline" @submit.prevent="searchSubmit">
                <a-form-item>
                    <a-input class="width120" v-model="searchForm.nickName" allowClear placeholder="昵称"></a-input>
                </a-form-item>
                <a-form-item>
                    <a-select :placeholder="'性别'" allowClear showSearch v-model="searchForm.sex"
                              style="width: 120px">
                        >
                        <a-select-option v-for="(item, index) in wxmpUserSexOPT" :key="index" :value="item.value">{{
                            item.label }}
                        </a-select-option>
                    </a-select>

                </a-form-item>
                <a-form-item>

                    <a-select :placeholder="'订阅状态'" allowClear v-model="searchForm.subscribe"

                              style="width: 120px">
                        <a-select-option :value="true">关注中</a-select-option>
                        <a-select-option :value="false">已取消</a-select-option>
                    </a-select>


                </a-form-item>

                <a-form-item>
                    <a-input class="width120" v-model="searchForm.province" allowClear placeholder="省份"></a-input>
                </a-form-item>
                <a-form-item>
                    <a-input class="width120" v-model="searchForm.city" allowClear placeholder="城市"></a-input>
                </a-form-item>


                <a-form-item>
                    <a-button icon="search" type="primary" html-type="submit">搜索</a-button>
                </a-form-item>



            </a-form>
        </template>





        <a-table bordered :columns="columns" :rowKey="record => record.openId" :dataSource="dataSource"
                 :pagination="pagination"

                 :loading="loading" @change="handleTableChange">

            <!-- 头像 -->
            <template slot="avatarUrl" slot-scope="text, record">
                <a-avatar :size="50" class="exAvatar" :src="text"  v-if="record.nickName" >{{ record.nickName.substr(0, 1) }}</a-avatar>
            </template>




        </a-table>


    </a-card>
</template>


<script>


    import {pagination, userTable} from '../public/colums';
    import {userList} from '../public/http';

    export default {


        data() {
            return {
                editShow: false, //打开编辑器
                editRecord: {}, //正在编辑的记录
                tagShow: false,  //编辑器打开状态
                tagChecked: null, //选定的标签号码
                tagType: null,  //标签方法

                dataSource: [],
                selectOpenIds: [], //选中的组件
                pagination: {...pagination}, //复制预设的分页参数
                loading: false, //表格loading
                columns: userTable, //表头管理
                searchForm: {},

                wxmpTagOPT: [],
                wxmpSubscribeSceneOPT: [],
                wxmpUserSexOPT: [],

            };
        },
        methods: {

            //1.0 获取表格数据
            getTableList() {
                this.loading = true;
                let searchData = this.$exMod.filterObjEmpty(this.searchForm); //删除对象中的空值
                userList(this.pagination, searchData).then(res => {
                    this.loading = false;
                    if (res.code === 0) {
                        this.dataSource = res.data.result; //表格数据
                        this.pagination.total = res.data.total; //总记录条数
                    }
                });
            },
            //1.2翻页监听
            handleTableChange(pagination) {
                this.pagination.current = pagination.current;
                this.pagination.pageSize = pagination.pageSize;
                this.getTableList();
            },

            //3.0 搜索提交
            searchSubmit() {
                this.pagination.current = 1;
                this.getTableList();
            },


        },
        created() {
            this.getTableList();
        }
    };
</script>

